<template>
  <base-panel>
      <div class="center-content">
        <el-card class="box-card">
          <img :src="leftImage" width="465" height="532"/>
          <div class="right-form">
                   <div class="top-info">
                     <user-avatar :user="user" v-if="loading"/>
                     <div class="name">{{user.alias}}</div>
                   </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="job" />
                部门
                <div class="pull-right">{{ user.user_dept&&user.user_dept.map(item=>item.name).join("、") }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="people" />
                工号
                <div class="pull-right">{{ user.identity }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />
                手机号码
                <div class="pull-right">{{ user.phone }}</div>
              </li>

<!--              <li class="list-group-item" v-if="false">-->
<!--                <svg-icon icon-class="envelope" />-->
<!--                电子邮箱-->
<!--                <div class="pull-right">{{ user.email}}</div>-->
<!--              </li>-->
<!--              <li v-if="false" class="list-group-item">-->
<!--                公文通知-->
<!--                <div class="pull-right">-->
<!--                  <el-switch-->
<!--                          v-model="switchValue.hysms"-->
<!--                          active-color="#13ce66"-->
<!--                          inactive-color="#ff4949"-->
<!--                          :active-value="1"-->
<!--                          active-text="开"-->
<!--                          inactive-text="关"-->
<!--                          :inactive-value="0">-->
<!--                  </el-switch>-->
<!--                </div>-->
<!--              </li>-->
<!--              <li v-if="false" class="list-group-item">-->
<!--                会议通知-->
<!--                <div class="pull-right">-->
<!--                  <el-switch-->
<!--                          v-model="switchValue.rcsms"-->
<!--                          active-color="#13ce66"-->
<!--                          inactive-color="#ff4949"-->
<!--                          :active-value="1"-->
<!--                          active-text="开"-->
<!--                          inactive-text="关"-->
<!--                          :inactive-value="0">-->
<!--                  </el-switch>-->
<!--                 </div>-->
<!--              </li>-->
<!--              <li v-if="false" class="list-group-item">-->
<!--                日程通知-->
<!--                <div class="pull-right">-->
<!--                  <el-switch-->
<!--                          v-model="switchValue.gwsms"-->
<!--                          active-color="#13ce66"-->
<!--                          inactive-color="#ff4949"-->
<!--                          :active-value="1"-->
<!--                          active-text="开"-->
<!--                          inactive-text="关"-->
<!--                          :inactive-value="0">-->
<!--                  </el-switch>-->
<!--                </div>-->
<!--              </li>-->
<!--          -->
<!--             <div v-if="false">-->
<!--               <el-button size="mini" style="float: right;margin-top: 10px;" @click="toSave">保存</el-button>-->
<!--&lt;!&ndash;               <el-button size="mini" style="float: right;margin:10px" @click="toDownload">字体下载</el-button>&ndash;&gt;-->
<!--               <el-button size="mini" style="float: right;margin-top: 10px; margin-right: 10px" @click="changePwd">修改密码</el-button>-->
<!--             </div>-->
            </ul>
          </div>
        </el-card>
      </div>
    <reset-pwd v-if="visible" :visible.sync="visible"></reset-pwd>
  </base-panel>
</template>

<script>
import user from "@/api/systemManagement/user/index";
import ResetPwd from "./resetPwd";
import UserAvatar from "./userAvatar";
import store from "@/store";
import { mapGetters } from 'vuex'
export default {
  name: "Profile",
  components: {UserAvatar, ResetPwd},
  data() {
    return {
      visible:false,
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo",
      switchValue: {hysms:1,rcsms:1,gwsms:1},
      identity:"",
      userName:"",
      smsList:[{hysms:0,rcsms:0,gwsms:0},{hysms:1,rcsms:1,gwsms:1},{hysms:1,rcsms:1,gwsms:0},{hysms:1,rcsms:0,gwsms:1},{hysms:0,rcsms:1,gwsms:1},{hysms:1,rcsms:0,gwsms:0},{hysms:0,rcsms:1,gwsms:0},{hysms:0,rcsms:0,gwsms:1}],
      loading:false,
      user:{},
      leftImage:""
    };
  },
  created() {
    this.getUser();
    this.getImage()
  },
  computed: {
    ...mapGetters(["userinfo"])
  },
  methods: {
    getImage(){
      store.dispatch('baseSettings/getSiteInfo').then(res=>{
        this.leftImage = res.userCenter;
      })
    },
    changePwd(){
      this.visible = true
    },
    getUser() {
      store.dispatch("user/getUsersInfo").then(res => {
        this.user = res.data;
        this.switchValue = JSON.parse(JSON.stringify(this.smsList[this.user.sms]))
        this.loading = true
      }).catch(() => {
      });
    },
    toSave(){
        for(let i=0; i<this.smsList.length; i++){
          if(this.smsList[i].hysms==this.switchValue.hysms&&this.smsList[i].rcsms==this.switchValue.rcsms&&this.smsList[i].gwsms==this.switchValue.gwsms){
            this.user.sms = i
            break
          }
        }
        user.accountsUsersSms({sms:this.user.sms}).then(res=>{
          this.msgSuccess(res.msg)
        })
    },
    toDownload(){
      window.open("//oa.hunnu.edu.cn/api/minio/win-fonts.exe")
    }
  }
};
</script>
<style lang="scss" scoped>
  .app-container{
    min-height: 800px;
    height: calc(100vh - 150px);
    .center-content{
      margin: 50px auto 0;
      min-height:800px;
        ::v-deep.el-card__body {
          padding: 0px;
          display:flex;
        }
        .right-form{
          padding: 28px;
          width: 100%;
          .top-info{
            width: 120px;
            height: 160px;
            margin: 23px auto 23px;
            .name{
              margin-top: 23px;
              font-size: 20px;
              font-weight: 700;
              text-align: center;
            }
          }
          .list-group-striped > .list-group-item {
            border-left: 0;
            border-right: 0;
            border-radius: 0;
            padding-left: 0;
            padding-right: 0;
          }

          .list-group {
            padding-left: 0px;
            list-style: none;
          }

          .list-group-item {
            border-bottom: 1px solid #e7eaec;
            border-top: 1px solid #e7eaec;
            margin-bottom: -1px;
            padding: 11px 0px;
            font-size: 13px;
          }
          .pull-right {
            float: right !important;
          }
        }
    }
    .el-form-item{
      margin-bottom: 5px;
    }
    .el-radio{
      width: calc(50% - 30px);
    }
  }
</style>
